<template>
  <div id="vditor"></div>
</template>

<script>
import Vditor from "vditor"
import "vditor/dist/index.css"
export default {
  name: "MarkdownEditor",
  data() {
    return {
      contentEditor: '',
      vditorOptions: {
        height: window.innerHeight-200,
        toolbarConfig: {
          hide:false,
          pin:true
        },
        typewriterMode: true,
        cache: {
          enable: true,
        },
        outline: {
          enable: true,
          position: 'left',
        },
        mode: "sv",//sv分屏预览, ir即时渲染 , wysiwyg 所见即所得
        preview: {
          delay: 1000,
          mode: "both",//both 分屏  editor 仅编辑
          show: true
        },
        after: () => {
          this.contentEditor.setValue(this.mdText)
        },
      }
    }
  },
  props: {
    mdText: String
  },
  methods: {
    initEditor() {
      this.contentEditor = new Vditor('vditor', this.vditorOptions)
    },
  },
  mounted() {
    this.initEditor()
  }
}
</script>

<style scoped>
</style>
